import React, { PureComponent,Fragment } from 'react';
import moment from 'moment';
import { connect } from 'dva';
import { 
  Card, 
  Button, 
  Form, 
  Table, 
  message,
 } from 'antd';
//import PageHeaderLayout from '../../layouts/PageHeaderLayout';
//import { fixedZeroTo4Bit } from '../../utils/utils';
//import styles from './Funds.less';
//import { isEmptyObject } from '../../utils/reg';
//import { Yuan } from '../../utils/math';
//import watermark from '../../assets/icon/revocation.png';
import styles from './print.less';

@connect(({ finance, loading }) => ({
  finance,
  loading: loading.models.list,
}))
@Form.create()
export default class LoanSettleMent extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      loading: true,
    };
  }

  componentDidMount() {
    window.Isoption = true;
    // const code = !isEmptyObject(this.props.match) ? this.props.match.params.id : 0;
    // this.statisticalInfo({ receiptsCode: code });
  }

  componentWillMount() {
    window.Isoption = false;
  }

  // 结算单列表详情
  statisticalInfo(params) {
    this.props.dispatch({
      type: 'finance/statisticalInfo',
      payload: params,
    }).then(() => {
      this.setState({
        loading: false,
      })
    });
  }

  // 撤销操作
  fetchRevocation(params) {
    this.props
      .dispatch({
        type: 'finance/fetchRevocation',
        payload: params,
      })
      .then(() => {
        const { finance: { revocationData } } = this.props;
        const { code } = revocationData;
        if (code === 200) {
          message.info('撤销货款单成功!').then(() => {
            window.location.href = '/funds/loansettlement';
          });
        } else {
          message.info('撤销货款单失败!');
        }
      });
  }

  // 撤销
  cancer = () => {
    const code = !ithis.props.match ? this.props.match.params.id : 0;
    this.fetchRevocation({
      receiptsCode: code,
    });
  };

  // 返回
  back = () => {
    window.history.back();
  };

  // 打印
  print(){
    window.document.body.innerHTML = window.document.getElementById('billDetails').innerHTML;  
    window.print(); 
    window.location.reload();
  }

  render() {
    const {  loading } = this.props;
    let data = [
      {
        attrName:'电饭锅',
        goodsAmount:3,
        number:8,
        weight:10,
        averageAmount:29,
        averageWeight:6,
        type:3,
        amount:999
      }
    ];
    // let data = [];
    //     createName,
    //     createTime;
    // if (statisticalInfo && !Array.isArray(statisticalInfo)) {
    //   data = statisticalInfo;
    //   createName = statisticalInfo.createName;
    //   createTime = statisticalInfo.createTime;
    // }

    // if (statisticalInfo != undefined) {
    //   data = statisticalInfo.goodsVos;
    // }

    // let _data = [],
    //     receiptsCode;
    // if (statisticalInfo && !Array.isArray(statisticalInfo)) {
    //   _data = statisticalInfo;
    //   receiptsCode = statisticalInfo.receiptsCode;
    // }
    // const { supplierName, carNo, stallName, startTime, endTime, enable } = _data;

    const len = data.length;

    const columns = [
      {
        title: '品种',
        dataIndex: 'attrName',
        align: 'center',
      },
      {
        title: '销售货款',
        dataIndex: 'goodsAmount',
        align: 'left',
        render: (text, record, index) => {
          //const { goodsAmount, goodsPaymentStr } = record;
         const type =2;
         // const type = goodsPaymentStr !== null ? goodsPaymentStr.split('负').length : -1;
          if (index < len - 1) {
            return <span>{888}</span>;
          }
          return {
            children:
              type == 2 ? (
                <span className={styles.neg}>{'好久好久'}</span>
              ) : (
                <span className={styles.bold}>{'好久好久'}</span>
              ),
            props: {
              colSpan: 7,
            },
          };
        },
      },
      {
        title: '件数',
        dataIndex: 'number',
        align: 'center',
        render: (text, record, index) => {
         // const { number } = record;
          if (index < len - 1) {
            return <span>{6}</span>;
          }
          return {
            children: '',
            props: {
              colSpan: 0,
            },
          };
        },
      },
      {
        title: '重量',
        dataIndex: 'weight',
        align: 'center',
        render: (text, record, index) => {
         // const { weight } = record;
          if (index < len - 1) {
            return <span>{8}</span>;
          }
          return {
            children: '',
            props: {
              colSpan: 0,
            },
          };
        },
      },
      {
        title: '平均售价',
        dataIndex: 'averageAmount',
        align: 'center',
        render: (text, record, index) => {
          const { averageAmount } = record;
          if (index < len - 1) {
            return <span>{22}</span>;
          }
          return {
            children: '',
            props: {
              colSpan: 0,
            },
          };
        },
      },
      {
        title: '平均重量',
        dataIndex: 'averageWeight',
        align: 'center',
        render: (text, record, index) => {
          const { averageWeight } = record;
          if (index < len - 1) {
            return <span>{5}</span>;
          }
          return {
            children: '',
            props: {
              colSpan: 0,
            },
          };
        },
      },
      {
        title: '费用类型',
        dataIndex: 'type',
        align: 'center',
        render: (text, record, index) => {
          const { type } = record;
          if (index < len - 1) {
            return <span>{3}</span>;
          }
          return {
            children: '',
            props: {
              colSpan: 0,
            },
          };
        },
      },
      {
        title: '扣款金额',
        dataIndex: 'amount',
        align: 'center',
        render: (text, record, index) => {
          const { amount } = record;
          if (index < len - 1) {
            return <span>{33}</span>;
          }
          return {
            children: '',
            props: {
              colSpan: 0,
            },
          };
        },
      },
    ];

    return (
      <Fragment>
        <div className={styles.billDetails} id={'billDetails'}>
          <Card
            bordered={false}
            title=""
          >
            <div className={styles.paymentbill}>
              <div style={{display: 'flex', height: '60px', lineHeight: '60px'}}>
                <h1 style={{flex: 1, textAlign: 'center'}}>方法第三方</h1>
                <span style={{position: 'absolute', right: '10px', color: '#FF6666', fontWeight: '600'}}>55</span>
              </div>

              <div style={{display: 'flex'}}>
                <h2 style={{flex: 1, textAlign: 'center'}}>商品销售车次结算单</h2>
                <div style={{position: 'absolute', right: '10px'}}>
                  <Button type="primary" onClick={this.cancer}  style={{marginRight: '5px'}}>
                    撤销
                  </Button>
                  <Button onClick={this.print.bind(this)} style={{marginRight: '5px'}}>打印</Button>
                  <Button type="primary" onClick={this.back} style={{marginRight: '5px'}}>
                    返回
                  </Button>
                </div>
              </div>

              <div style={{display: 'flex'}}>
                <h3 style={{flex: 1, textAlign: 'left'}}>的更多发挥
                </h3>
                <h3 style={{flex: 1}}>大概</h3>
                <h3 style={{flex: 1}}>大概3</h3>
              </div>

              
            </div>
          </Card>
          <Card
            bordered={false}
            title=""
            bodyStyle={{ padding: '0 16px' }}
          >
            <Table
              dataSource={data}
              columns={columns}
              bordered
              pagination={false}
              loading={false}
            />
          </Card>
          <Card style={{ border: 0 }}>
            <div style={{display: 'flex'}}>
              <h3 style={{flex: 1}}>446</h3>
              <h3 style={{flex: 1, textAlign: 'right'}}>hfh</h3>
            </div>
          </Card>
        </div>
      </Fragment>
    );
  }
}